<template>
  <div id="contain">

    <div class="map_title"><h3>地图组件示例</h3></div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    // key:9cd031ca71170a64f27193b4dc8a00a2	安全密钥：f5489ecb29d524034948865c6fa4b6cc
    data() {
      return {
         //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        //map:null,
      }
    },
    mounted() {
      AMapLoader.load({
        key:'	bf605d4ab046bff2a20e176225de87cb',
        version:'2.0',// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ToolBar', 'AMap.Driving','AMap.Weather','AMap.Transfer','AMap.Geolocation'],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version:'2.0',
        }
      }).then((AMap) => {
          this.map = new AMap.Map("container", {
              viewMode: "3D",
              zoom: 5, //级别
              zooms: [2, 22],
              center: [124.12741, 41.30059], //中心点坐标
//               124.12741
// 【纬度】41.30059
              
          });
          var weather = new AMap.Weather();
          weather.getForecast('北京市', function(err, data) {
            console.log(err, data);
          });
      }).catch(e => {
          console.log(e);
      })
      // this.getLocation()
    },
    methods: {
     
    },
  }
</script>

<style lang="scss" scoped>
#contain {
  padding: 0;
  margin: 0;
  width: 1000px;
  margin: 0 auto;
  height: 500px;
  position: relative;
 >.map_title {
   position: absolute;
    z-index: 1;
    width: 100%;
    height: 50px;
    background-color: rgba(27, 25, 27, 0.884);
    h3 {
      position: absolute;
      left: 10px;
      z-index: 2;
      color: white;
    }
 }
 >#container {
   padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
 }
}
</style>
